<template>
  <view class="card" @click="onCard">
    <view class="card_top">
      <view class="device-code-state flexRowBetween">
        <view class="device-code">
          <view>设备编号：</view>
          <text user-select>{{ info.device_sn }}</text>
        </view>
        <view class="device-bind-state flexRowAllCenter">
          <view class="bind">
            <block v-if="info.dianweiid > 0">
              <image class="bind_icon" src="@/pagesB/static/img/icon/isBind_icon.png" />
              <view class="theme-color">已绑定</view>
            </block>
            <block v-else>
              <image class="bind_icon" src="@/pagesB/static/img/icon/noBind_icon.png" />
              <view class="text-warn">未绑定</view>
            </block>
          </view>

          <!--已绑定点位-->
          <block v-if="info.dianweiid > 0">
            <!--蓝牙设备-->
            <block v-if="info.isBlue">
              <view class="online devece-state">
                <block v-if="info.isRechargeDevice">
                  <image class="online_icon" src="@/pagesB/static/img/icon/device_online_icon.png" />
                  <view class="theme-color">{{ info.isUse ? "正在充电" : "等待使用" }}</view>
                </block>
              </view>
            </block>
            <block v-else>
              <view class="online devece-state">
                <block v-if="info.status == 1">
                  <image class="online_icon" src="@/pagesB/static/img/icon/device_online_icon.png" />
                  <view class="theme-color">在线/{{ (info.isGameDevice && info.isUse) ? "使用中" : "未使用" }}</view>
                </block>
                <block v-if="info.status == 3">
                  <image class="online_icon" src="@/pagesB/static/img/icon/device_unline_icon.png" />
                  <view class="text-warn">离线</view>
                </block>
              </view>
            </block>
          </block>
        </view>
      </view>
      <view class="point-name">
        <view class="device-code">
          <view>系统码：</view>
          <text user-select>{{ info.vCode != 0 && info.vCode ? info.vCode : '未绑定' }}</text>
    
        </view>
      </view>

      <view class="point-name">
        <view class="device-code">

          <view>{{ vPointName }}：</view>
          <view class="textMaxTwoLine">{{
            info.hotelName ? info.hotelName : ""
          }}</view>
        </view>
      </view>
      <view class="point-name">
        <view class="device-code">

          <view> 拥有者：</view>
          <view class="textMaxTwoLine">{{ info.user.user_login }}{{ info.user.user_nickname ? " ( " +
            info.user.user_nickname + " )" : "" }}</view>
        </view>
      </view>
      <view class="point-name" v-if="info.deviceTypeName">
        <view class="device-code">

          <view> 设备类型：</view>
          <view class="textMaxTwoLine">{{ info.deviceTypeName }}</view>
        </view>
      </view>
      <view class="point-name">
        <view class="device-code">
          <view>设备状态：</view>
          <view :style="{ color: info.use_status == 1 ? '#0EADE2' : 'red' }">{{ info.use_status == 1 ? '启用' : '禁用'
          }}{{ info.use_status == 1 ? '' : `（原因：${info.reason ? info.reason : '无'}）` }}</view>
        </view>
      </view>
      <view class="point-name">
        <view class="device-code">
          <view>最近成交：</view>
          <view >{{ info.lastest_order_time_str ?  info.lastest_order_time_str : '大于30天'
          }}</view>
        </view>
      </view>
      <view class="point-name" style="justify-content : flex-start;">
        <view class="device-code">

          <view><text>{{ info.isGameDevice ? "游戏规则：" : info.isRechargeDevice ? "充电规则：" : "库存总数：" }}</text>
          </view>
          <view><text>{{ shopStatus }}</text></view>
        </view>
      </view>
  
      <view class="point-name">

        <view>
          <view class="device_item">
            <view>灯光:</view>
            <view :style="{ color: info.light_status == 1 ? '#0EADE2' : 'red' }">{{ info.light_status == 1 ? '开启' : '关闭'
            }}</view>
          </view>
        </view>
        <view>
          <view class="device_item">
            <view>提示音:</view>
            <view :style="{ color: status == 1 ? '#0EADE2' : 'red' }">{{ status == 1 ? '开启' : '关闭' }}</view>
          </view>
        </view>
        <view>
          <view class="device_item">
            <view>水:</view>
            <view >{{ num}}</view>
          </view>
        </view>
        <view>
          <view class="device_item">
            <view>电:</view>
            <view >{{ info.electricity}}</view>
          </view>
        </view>
        <view>
          <view class="device_item">
            <view>信号:</view>
            <view>{{  info.csq_level || 0 }}</view>
          </view>
        </view>
      </view>
      <view class="updata">
      <BaseUpdata title="灯电量" :time="info.report_time" @onClick="updataClick" :refresh="manyUpdata" iosSize="35"></BaseUpdata>
    </view>
    </view>

    <view class="card_btn flexRowBetween">
      <block v-if="goShow">
        <view class="card_btn_go">
          <view class="card_btn_go" @click.stop="goStart">
          {{
            (info.isGameDevice && info.isUse) ? "使用中" : "启动"
          }}</view>
         
        </view>
      </block>
      <block v-else-if="vUserInfo.role_id != 6">
        <view class="card_btn_box" @click.stop="onUnbind" v-if="vButtonPermissions&&vButtonPermisAides">
          {{
            info.dianweiid > 0 ? "解除绑定" : "绑定" + vPointName
          }}
        </view>
        <view v-if="!info.isRechargeDevice&&vButtonPermissions&&vButtonPermisAides" class="card_btn_box" @click.stop="deviceGoods">
          {{ info.isGameDevice ? "设置" + vCargoLanes : "绑定商品" }}
        </view>
        <view v-if="!info.isRechargeDevice&&vButtonPermissions&&vButtonPermisAides" class="card_btn_box" @click.stop="deviceAd">
          营销设置
        </view>
        <view class="card_btn_box" v-if="info.isGameDevice" @click.stop="remote">
          遥控设备
        </view>

        <view v-if="!info.isGameDevice&&vButtonPermissions" class="card_btn_box" @click.stop="repl">
          操作设备
        </view> 
        <view v-if="vIsCharge&&vButtonPermissions" class="card_btn_box" @click.stop="onCard">
          充电规则
        </view>
  
        <view  v-if="false&&vButtonPermissions" class="card_btn_box" @click.stop="autoOnOff">
          {{ info.is_auto_on_off ? "关闭自动待机" : "开启自动待机" }}
        </view>
        <view  v-if="vButtonPermissions" class="card_btn_box" @click.stop="onOff">
          {{ info.use_status == 1 ? "禁用设备" : "启用设备" }}
        </view>
        <view v-if="info.isGameDevice&&vButtonPermissions" class="card_btn_box" @click.stop="other">
          其他操作
        </view>
  
      </block>
      <block v-else>
        <view v-if="info.isGameDevice">
          <BaseButton type="default" width="320" shape="circle" @onClick.stop="onStartDevice(2, 1)">
            开启泡泡+音乐60秒
          </BaseButton>
        </view>
        <view v-if="info.isGameDevice">
          <BaseButton type="default" width="220" shape="circle" @onClick.stop="onStartMusic(1)">
            开启音乐60秒
          </BaseButton>
        </view>
        <view v-if="info.isGameDevice" style="margin-top: 20rpx;">
          <BaseButton type="default" width="180" shape="circle" @onClick.stop="onStartDevice(0, 0)">
            停止
          </BaseButton>
        </view>

      </block>
      <view style="width: 30%" v-for="item in 2" :key="item"> </view>
    </view>
  
  </view>
</template>

<script>
import BaseButton from "@/components/base/BaseButton.vue";
import BasePopup from "@/components/base/BasePopup.vue";
import TypeSelectPopup from "@/components/common/TypeSelectPopup.vue";
import BaseUpdata from "@/components/base/BaseUpdata.vue";
export default {
  components: { BaseButton, BasePopup, TypeSelectPopup,BaseUpdata },
  name: "DeviceListCard",
  props: {
    info: {
      type: Object,
    },
    goShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    num() {
      if (this.info.remain_game_time > 0) {
        return (this.info.remain_game_time / this.vGamingTime).toFixed(1)
      } else {
        return 0
      }


    },
    deviceText() {
      if (this.info == undefined || !this.info.status) {
        return "";
      }
      switch (this.info.status) {
        case 1:
          return "在线";
        case 2:
          return "异常";
        case 3:
          return "离线";
        default:
          break;
      }
    },
    shopStatus() { // 状态
      if (this.info.shopstatus) {
        return this.info.shopstatus.replace(/\\n/g, '\n');
      } else {
        return "未设置";
      }
    },
    status() {
      if (this.info.tip_music) {
        let a = this.info.tip_music.split(',')
        console.log('提示音状态', a)
        return this.info.tip_music.split(',')[0]
      }
    }
  },


  data() {
    return {
    };
  },

  methods: {
    other() {
      this.$emit('others')
    },
 
    onUnbind() {
      this.$emit("onUnbind");
    },
    deviceGoods() {
      this.$emit("deviceGoods");
    },
    autoOnOff() {
      this.$emit("autoOnOff");
    },
    onOff() {
      this.$emit("onOff");
    },
    repl() {
      this.$emit("repl");
    },
    remote() {
      this.$emit("remote");
    },
    goStart() {
      if (!this.info.isUse) {
        this.$emit("goStart");
      } else {
        this.isShowErr("正在使用")
      }
    },
    onCard() {
      console.log("用户角色", this.vUserInfo.role_id);
      if (this.vUserInfo.role_id == 6) {
        return;
      }
      this.$emit("onCard");
    },
    deviceAd() {
      this.isShowErr("未开放")
      // uni.navigateTo({
      //   url: "/pagesB/device/DeviceAd?device_sn=" + this.info.device_sn,
      // });
    },
    updataClick() {
     
      this.$emit('updataTime');

    },
    onStartDevice(channel, time) {
      let data = {
        device_sn: this.info.device_sn, // 设备编号
        channel: channel, // 命令
        length_time: time, // 分钟
      };
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.startUM(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        this.isShowSuccess("操作成功");
      });
    },
    onStartMusic(time) {
      let data = {
        device_sn: this.info.device_sn,
        length_time: time,
      };
      this.$u.api.startMusic(data).then((res) => {
        console.log(res);
        this.isShowSuccess("操作成功");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  &_top {
    padding-bottom: 20rpx;
  }

  .device-code-state,
  .point-name {
    margin-bottom: 10rpx;

    >view {
      white-space: nowrap;
    }

    .devece-state {
      margin-left: 20rpx;
    }
  }

  .device-code {
    >view:nth-child(1) {

      width: 160rpx;
      text-align: justify;
      text-align-last: justify;
      // border: 1px solid #000;
    }
  }

  .device_item {
    // border: 1px solid #000;
    display: flex;
    margin-right: 30rpx;
    font-size: 25rpx;
    // width: 12rpx;
    // border: 1px solid #000;
  }

  .device-code,
  .point-name,
  .products-state {
    display: flex;
    flex-direction: row;
    font-size: $font-size-base;

    >view {
      &:first-child {
        color: $textDarkGray;
        // width: 120rpx;
      }

      &:last-child {
        color: $textBlack;
      }
    }
  }
}

.pup_box {
  padding: 20rpx;
  padding-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
  >view{
    width: 270rpx;
    margin: 20rpx;
  }
}

.bule {}

.card_btn {
  padding: 0rpx;
  flex-wrap: wrap;
  justify-content: space-between;

  align-items: center;
  .card_btn_go {
    width: 200rpx;
    padding: 20rpx 0;
    border: 2rpx solid rgb(212, 212, 212);
    margin: 10rpx;
    display: flex;
    border-radius: 50rpx;
    justify-content: center;
  }

  .card_btn_box {
    box-sizing: border-box;
    width: 190rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    // width: 30%;
    border-radius: 50rpx;
    margin: 10rpx;
    padding: 20rpx 0rpx;
    border: 2rpx solid rgb(212, 212, 212);
    // &:nth-child(n + 4) {
    //   margin-top: 20rpx;
    // }
  }

  .card_btn_length {
    border-radius: 50rpx;
    border: 2rpx solid rgb(212, 212, 212);
    padding: 20rpx 0rpx;
    margin: 10rpx 0;
    margin-left: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
